<template>
  <div class="pane">
    <div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content ep-bg-purple" />
          <el-form :inline="true" :model="selectData" class="demo-form-inline">
            <el-form-item label="新增人员：姓名">
              <el-input v-model="selectData.username" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="findstatus">查询</el-button>
            </el-form-item>
          </el-form>
          <el-button type="success" plain @click="addBatch">批量加入</el-button>
          <el-table :data="dataList.comList" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="No" width="100" />
            <el-table-column prop="username" label="姓名" width="100" />
            <el-table-column prop="userJob" label="职位" width="100" />
            <el-table-column prop="status" label="状态" show-overflow-tooltip />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" size="small" @click="addBatchone(scope.$index, scope.row)">
                  加入
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination v-model:currentPage="selectData.pages" :page-size="selectData.pagesizes"
            :page-sizes="[10, 20, 30, 40]" small layout="total, sizes, prev, pager, next, jumper"
            :total="selectData.count" @size-change="sizeChange" @current-change="currentChange" />
        </el-col>
        <el-col :span="12">
          <div class="grid-content ep-bg-purple" />
          <el-button type="success" plain @click="release">批量释放</el-button>
          <el-table style="width: 100%" :data="dataList1.comList1" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="userId" label="No" width="100" />
            <el-table-column prop="username" label="姓名" width="100" />
            <el-table-column prop="rank" label="职位" width="100" />
            <el-table-column prop="status" label="状态" show-overflow-tooltip />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" size="small" @click="releaseone(scope.$index, scope.row)">
                  释放
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination v-model:currentPage="selectData.page" :page-size="selectData.pagesize"
            :page-sizes="[10, 20, 30, 40]" small layout="total, sizes, prev, pager, next, jumper"
            :total="selectData.counts" @size-change="sizeChange1" @current-change="currentChange1" />
        </el-col>
      </el-row>
    </div>
    <div style="text-align:center;margin-top:18px;">
      <el-button type="primary" @click="handleLastStep()">上一步</el-button>
      <el-button type="primary" @click="handleNextStep()">下一步</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed } from 'vue'
import { InitData } from '@/type/project'
import { findBenchUsersList, findProjectUsersList, addBatchList, releaseList } from "@/request/staffingapi";
export default defineComponent({
  emits: ["handleLastStep", "handleNextStep"],
  setup(prop, ctx) {
    const data = reactive(new InitData())
    const datas = reactive({
      tableData: [
        {
          id: 25,
          username: '小宇',
          userJob: 'leader',
          status: 'On Project'
        },
      ]
    })
    //获取数据
    onMounted(() => {
      //let a = JSON.parse(localStorage.getItem("projectId") || "[]");
      //console.log(a);    

      getdataBenchUsers()
      findProjectUsers()
    });
    //加入表格
    const getdataBenchUsers = () => {
      const params: Object = {
        num: 1,
        request: "",
        size: 100,
        id: '',
      }
      findBenchUsersList(params).then(res => {
        console.log(res);
        data.list = res.data.list
        data.selectData.count = res.data.list.length
      });
    }
    let a = localStorage.getItem('projectId')
    console.log(a);
    
    //分页增加
    const dataList = reactive({
      comList: computed(() => {
        return data.list.slice((data.selectData.pages - 1) * data.selectData.pagesizes, data.selectData.pages * data.selectData.pagesizes);
      }),
    });
    const currentChange = (pages: number) => {
      data.selectData.pages = pages
    }
    const sizeChange = (pagesizes: number) => {
      data.selectData.pagesizes = pagesizes
    }
    //释放表格
    const findProjectUsers = () => {
      const params: Object = {
        request: {
          projectId: 1,
        },
        num: 1,
        size: 50,
      }
      findProjectUsersList(params).then(res => {
        console.log(res);
        data.list1 = res.data.list
        data.selectData.counts = res.data.list.length
      });
    }
    //分页释放
    const dataList1 = reactive({
      comList1: computed(() => {
        return data.list1.slice((data.selectData.page - 1) * data.selectData.pagesize, data.selectData.page * data.selectData.pagesize);
      }),
    });
    const currentChange1 = (page: number) => {
      data.selectData.page = page
    }
    const sizeChange1 = (pagesize: number) => {
      data.selectData.pagesize = pagesize
    }

    const handleSelectionChange = (val: any) => {
      console.log(val);
      data.selectData.multipleSelection = val
    }
    //查询
    const findstatus = () => {
      //getdataBenchUsers()
      const params: Object = {
        num: 1,
        request: data.selectData.username,
        size: 100,
        id: '',
      }
      findBenchUsersList(params).then(res => {
        console.log(res); 
        data.list = res.data.list
        data.selectData.counts = res.data.list.length
      });
    }
    //批量加入
    const addBatch = () => {
      let val=data.selectData.multipleSelection
      console.log(val);
      const b=JSON.parse(JSON.stringify(val))
      console.log(b);
      let ids = b.map((item:any)=>{
	         return item.id;
        })
     console.log(ids); 

      const params: Object = {
        projectId: 1,
        userIds:ids ,
      }
      addBatchList(params).then((res) => {
        console.log(res);
        getdataBenchUsers()
        findProjectUsers()
      })
    }
    //单独加入
    const addBatchone = (index: number, row: any) => {
      //addBatchList(row.id)
      //let val=data.selectData.multipleSelection
      console.log(row);
      
      const params: Object = {
        projectId: 1,
        userIds:[row.id] ,
      }
      addBatchList(params).then((res) => {
        console.log(res);
        getdataBenchUsers()
        findProjectUsers()
      })
      
    }
    //批量释放
    const release = () => {
      let val=data.selectData.multipleSelection
      console.log(val);
      const b=JSON.parse(JSON.stringify(val))
      console.log(b);
      let userIds = b.map((item:any)=>{
	         return item.userId;
        })
     console.log(userIds); 
     const params={
      projectId:1,
      userId:userIds
     }
     releaseList(params).then((res)=>{
      console.log(res);
      getdataBenchUsers()
      findProjectUsers()
     })

    }
    //单独释放
    const releaseone = (index: number, row: any) => {
      //releaseList(row.id)
      console.log(row);
      
      const params: Object = {
        projectId:1,
        userIds: [row.userId],       
      }
      releaseList(params).then(res => {
        console.log(res);
        getdataBenchUsers()
        findProjectUsers()
      });
    }
    const handleNextStep = () => {
      ctx.emit('handleNextStep', { id: '1' })
    }
    const handleLastStep = () => {
      ctx.emit('handleLastStep', { id: '1' })
    }
    return { ...toRefs(data), ...toRefs(datas), a, dataList, currentChange, sizeChange,dataList1, currentChange1, sizeChange1, handleSelectionChange, findstatus, addBatch, addBatchone, release, releaseone, handleNextStep, handleLastStep, findProjectUsers, }
  },
})
</script>
<style scoped>
</style>